<template>
  <div class="invoice-container">
    <!-- 左侧图片区域 -->
    <div class="left-panel">
      <div v-if="!imageUrl" class="upload-placeholder" @click="triggerUpload">
        <i class="el-icon-plus"></i>
        <span>点击上传发票图片</span>
      </div>
      <div v-else class="image-viewer">
        <div class="toolbar">
          <i class="el-icon-zoom-in" @click="zoomIn"></i>
          <i class="el-icon-zoom-out" @click="zoomOut"></i>
          <i class="el-icon-d-arrow-left" @click="prevPage"></i>
          <i class="el-icon-d-arrow-right" @click="nextPage"></i>
        </div>
        <img :src="imageUrl" :style="imageStyle" @click="handleImageClick">
      </div>
    </div>

    <!-- 右侧信息区域 -->
    <div class="right-panel" v-if="invoiceData">
      <!-- 基本信息 -->
      <div class="section">
        <div class="section-title">基本信息</div>
        <div v-for="(value, key) in invoiceData.basic" :key="key" class="info-row">
          <div class="info-label">{{ key }}</div>
          <div class="info-value">{{ value }}</div>
          <div v-if="showCheckboxes" class="check-group">
            <el-radio-group v-model="basicVerify[key]">
              <el-radio :label="true">正确</el-radio>
              <el-radio :label="false">错误</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>

      <!-- 明细信息 -->
      <div class="section">
        <div class="section-title">明细信息</div>
        <div v-for="(item, index) in invoiceData.details" :key="index" class="info-row">
          <div class="info-label">{{ item.name }}</div>
          <div class="info-value">{{ item.value }}</div>
          <div v-if="showCheckboxes" class="check-group">
            <el-radio-group v-model="detailsVerify[index]">
              <el-radio :label="true">正确</el-radio>
              <el-radio :label="false">错误</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>

    <input type="file" ref="fileInput" style="display: none" @change="handleFileUpload" accept="image/*">
  </div>
</template>

<script>
export default {
  name: 'InvoiceUpload',
  data() {
    return {
      imageUrl: '',
      scale: 1,
      currentPage: 0,
      invoiceData: null,
      basicVerify: {},
      detailsVerify: {},
      userRole: ''  // ceshi, luru, kaifa
    }
  },
  computed: {
    showCheckboxes() {
      return this.userRole === 'ceshi' || this.userRole === 'luru'
    },
    imageStyle() {
      return {
        transform: `scale(${this.scale})`
      }
    }
  },
  created() {
    // 获取用户角色
    this.userRole = localStorage.getItem('userRole') || ''
  },
  methods: {
    triggerUpload() {
      this.$refs.fileInput.click()
    },
    async handleFileUpload(event) {
      const file = event.target.files[0]
      if (!file) return

      // 创建预览URL
      this.imageUrl = URL.createObjectURL(file)

      // 上传文件并识别
      const formData = new FormData()
      formData.append('file', file)
      
      try {
        const response = await this.$http.post('/api/find', formData)
        this.invoiceData = response.data
        
        // 初始化验证状态
        if (this.userRole === 'ceshi') {
          // ceshi用户默认全部选中"正确"
          this.initVerifyData(true)
        } else if (this.userRole === 'luru') {
          // luru用户无默认选中
          this.initVerifyData(null)
        }
      } catch (error) {
        this.$message.error('识别失败')
      }
    },
    initVerifyData(defaultValue) {
      // 初始化基本信息验证状态
      this.basicVerify = Object.keys(this.invoiceData.basic).reduce((acc, key) => {
        acc[key] = defaultValue
        return acc
      }, {})
      
      // 初始化明细信息验证状态
      this.detailsVerify = this.invoiceData.details.reduce((acc, _, index) => {
        acc[index] = defaultValue
        return acc
      }, {})
    },
    zoomIn() {
      this.scale = Math.min(this.scale + 0.1, 2)
    },
    zoomOut() {
      this.scale = Math.max(this.scale - 0.1, 0.5)
    },
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--
      }
    },
    nextPage() {
      // 假设有多页的情况
      this.currentPage++
    },
    handleImageClick() {
      // 处理图片点击，可以实现全屏预览等功能
    }
  }
}
</script>

<style scoped>
.invoice-container {
  display: flex;
  padding: 20px;
  gap: 20px;
  height: calc(100vh - 40px);
}

.left-panel {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #999;
}

.image-viewer {
  width: 100%;
  height: 100%;
  position: relative;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.8);
  padding: 5px;
  border-radius: 4px;
  display: flex;
  gap: 10px;
}

.toolbar i {
  cursor: pointer;
  padding: 5px;
}

.right-panel {
  width: 400px;
  overflow-y: auto;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

.info-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-label {
  width: 120px;
  color: #666;
}

.info-value {
  flex: 1;
}

.check-group {
  width: 160px;
}
</style>